<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立方體</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{font-size:12px; background:#ccc;}
.box{ position:relative; left:500px; top:300px;}
.box .inBox{ height:200px; width:200px; background:rgba(255,255,255,0.2); position:absolute; -moz-transform-origin:0% 0%;}
.box .inBox:after,.under .box_before:before,.under .box_right:before{background:rgba(0,0,0,0); display:block; height:200px; width:200px; content:" "; position:absolute; left:0px; top:0px;}

.box .box_before{-moz-transform:skew(0deg,20deg);}
.box .box_back{-moz-transform:skew(0deg,20deg); left:200px; top:-73px;}

.box .box_left{-moz-transform:skew(0deg,-20deg); background:rgba(255,255,255,0.1);}
.box .box_right{-moz-transform:skew(0deg,-20deg); left:200px; top:73px; background:rgba(255,255,255,0.2);}

.box .box_top{-moz-transform:rotate(-40deg) skew(30deg,20deg); height:185px; background:rgba(255,255,255,0.4);}
.box .box_bottom{-moz-transform:rotate(-40deg) skew(30deg,20deg); height:185px; top:200px; background:rgba(255,255,255,0.3);}

.box .box_bottom:after{height:185px;-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.4),1px 0px 0px rgba(255,255,255,0.4),-1px 1px 5px rgba(50,50,50,0.1);}
.box .box_before:after{-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0px rgba(255,255,255,0.6),-1px 0px 0px rgba(255,255,255,0.6); 
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));}
.box .box_right:after{-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0px rgba(255,255,255,0.6);
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2),rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_top:after{height:185px;-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6);\
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2),rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_left:after{
-moz-box-shadow:1px 0px 0px rgba(255,255,255,0.2); 
background:-moz-linear-gradient(-65deg, rgba(255,255,255,0.1),rgba(255,255,255,0) 50%,rgba(255,255,255,0.1));}
.box .box_back:after{
background:-moz-linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1), rgba(255,255,255,0));}

.under .box_before:before,.under .box_right:before{ -moz-transform:translate(0px,201px); background: -moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));}
.under .box_before:before{ width:201px;}

.box .box_before:hover{-moz-transform:skew(0deg, 0deg) translate(0px,73px);}
.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}
.box .box_top:hover{-moz-transform:rotate(-80deg) skew(30deg,20deg);}

.conBox{ padding:10px; font-size:12px; color:#333; line-height:1.5;}
.conBox .title{ color:#222;}

.box2{ position:relative; width:400px; left:900px; top:200px;}
.box3{ position:relative; width:400px; left:700px; top:-73px;}
</style>
</head>

<body>
<div class="box under">
    <div class="inBox box_left"></div>
    <div class="inBox box_back"></div>
    <div class="inBox box_bottom"></div>
    <div class="inBox box_right">
        <div class="conBox">
        <h3 class="title">中秋节要来啦</h3>
        <p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
        </div>
    </div>
    <div class="inBox box_before">
        <div class="conBox">
        <h3 class="title">中秋节要来啦</h3>
        <p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
        </div>
    </div>
    <div class="inBox box_top"></div>
    
</div>
<!--
<div class="box box2">
    <div class="inBox box_before">前</div>
    <div class="inBox box_back">后</div>
    <div class="inBox box_left">左</div>
    <div class="inBox box_right">右</div>
    <div class="inBox box_top">上</div>
    <div class="inBox box_bottom">下</div>
</div>

<div class="box box3">
    <div class="inBox box_before">前</div>
    <div class="inBox box_back">后</div>
    <div class="inBox box_left">左</div>
    <div class="inBox box_right">右</div>
    <div class="inBox box_top">上</div>
    <div class="inBox box_bottom">下</div>
</div>-->
</body>
</html>
